<template>
	<view class="content">
	
	<view class="image">
		<image :src="$host+src"></image>
	</view>
	<view class="title">{{title}}</view>	
		<view class="money">￥{{money}}<text class="a">.00</text></view>
		<view class="select">
			商品选择<text class="b">	规格、夹心口味（最多选两种）、蛋糕胚口味、蜡烛选项</text>
		
		</view>
			
	<view class="lx">	<view class="class "@click="selectBuys('bottom')">6寸</view>	<view class="class"  @click="selectBuys('bottom')">8寸</view>	<view class="class" @click="selectBuys('bottom')">10寸</view>	
		<view class="class" @click="selectBuys('bottom')">共21种选择</view></view>	
			
		<view class="tw">
			-------------<text>图文详情</text>----------------
		</view>	
			
			
<view class="buyNav">
	<image src="../../static/首页.png" mode="widthFix"></image>
		<image src="../../static/购物 购物车 订购.png" mode="widthFix"></image>
		<image src="../../static/详情页客服 .png" mode="widthFix"></image>
		<view class=" dd"  @click="selectBuys('bottom')"><view class="ac">加入购物车</view>
		<view class="bd" @click="selectBuys('bottom')">立即购买</view></view>
</view>

	<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" >
			<view class="Pshowbox">
				<view class="one">
					<view class="oneImage"><image :src="$host+src" mode="widthFix"></image></view>
					<view class="two"> <view class="twoTitle">{{title}}</view>
					        <view class="three"><view class="threeMoney">￥{{money}}.00</view> <view class="btnss">
							<view class="jian" @click="subtract">-</view>
							<text class="number" > {{count}}  </text>
							<view  class="add" @click="add"
							>＋</view>
							</view></view>
					 </view>
				</view>
				<view>
					<view class="guititle">规格：</view>
					<view class="guige">
						<view @click="sel" data-index="1"  :class="[index==1?'miness':'daa']" >6寸</view><view @click="sel" data-index="2"  :class="[index==2?'miness':'daa']" >8寸</view><view @click="sel" data-index="3"  :class="[index==3?'miness':'daa']" >10寸</view>
					</view>
				</view>
				<view class="ccc">
					<view class="guititle">夹心口味：</view>
					<view class="guige">
						<view  @click="sels" data-index="1"  :class="[indexs==1?'o':'t']">芒果</view><view  @click="sels" data-index="2"  :class="[indexs==2?'o':'t']">火龙果</view>
						<view  @click="sels" data-index="3"  :class="[indexs==3?'o':'t']">草莓</view>	<view  @click="sels" data-index="4"  :class="[indexs==4?'o':'t']">香蕉</view>
						<view  @click="sels" data-index="5"  :class="[indexs==5?'o':'t']">海盐奥利奥</view><view  @click="sels" data-index="6"  :class="[indexs==6?'o':'t']">肉松沙拉</view>
					</view>
				</view>
				<view class="ccc">
					<view >蛋糕胚胎口味：</view>
					<view class="guigeone">
						<view  @click="selss" data-index="7"  :class="[indexss==7?'o':'t']">原味蛋糕胚胎</view><view  @click="selss" data-index="8"  :class="[indexss==8?'o':'t']">巧克力蛋糕胚胎</view>
					</view>
				</view>
				
			<view class="bottoms">
				<view class="gOne" @click="goShop">加入购物车</view>
					<view class="gTne" @click="buybuy">立即购买</view>
			</view>
				
				
				
				
				
				
				
				
				
			</view>
		</uni-popup>

	</view>
	
	
	
	</view>
	
	
</template>

<script>

	export default{
 
		  data(){
			  return{
				  id:"",
				  money:"",
				  src:"",
				   title:"",
				   count:1,
				   $host:this.$host,
				   	type: 'bottom',
					index:0,
					indexs:0,
					indexss:0
				
			  }
		  },
		  onLoad(option){
			   this.src=option.src
			   this.title=option.title
			   this.money=option.money
			   this.id=option.id
			   this.count=option.count
			   
			 
			   if(this.count==null || this.count==0){
				      this.count=1
			   }
			 
			   
		  },
		  methods:{
			  sel(e){
				
				 this.index=parseInt(e.currentTarget.dataset.index)
				
			
			  },
			  sels(e){
			  				
			  				 this.indexs=parseInt(e.currentTarget.dataset.index)
			  				
			  			
			  },
			  selss(e){
			  				
			  				 this.indexss=parseInt(e.currentTarget.dataset.index)
			  				
			  			
			  },
			  buybuy(){
				  this.$request("/setclasstable","post",{id:this.id,count:this.count}).then(res=>{
				  	uni.navigateTo({
				  		url:"/pages/shopCars/tobuy"
				  	})
				  })
				  						
			  },
			goShop(){
							 this.$request("/setclasstable","post",{id:this.id,count:this.count}).then(res=>{
							 	uni.navigateTo({
							 		url:"/pages/shopCars/index"
							 	})
							 })
						
							
			},

			  add(e){
				
				  this.count++
			
			  },
				  
			  subtract(e){
				
				  if(this.count==1){
					  this.count==1
				  }else{
					    this.count--
				  }
			
			  }
			,
			  selectBuys(type){
				  	this.type = type;
			  	this.$refs['popup'].open();
			  }
		  }
		
	}
</script>

<style>
	.o{
		background-color: #fe9a69;	
		color:white;
	}
	.t{
			background-color:#f6f6f6;
	}
	.daa{
		background-color:#f6f6f6;
	}
	.miness{
		color: white;
	background-color: #fe9a69;	
	}
	.bottoms{
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		
	}
	.gOne{
		width: 160px;
		height: 36px;
		border-radius: 25px 0px 0px 25px;
		background-color: #fe9a69;
		line-height: 36px;
		text-align: center;
		color: white;
		font-size: 40rpx;
		font-weight: 500;
	}
	.gTne{
		width: 160px;
		height: 36px;
		border-radius: 0px 25px 25px 0px;
		background-color: #ff6d5a;
		line-height: 36px;
		text-align:center;
		color: white;
		font-size: 40rpx;
		font-weight: 500;
	}
	.guigeone{
		display: flex;
	}
		
	.guigeone>view{
		width: 120px;
		height: 30px;
	
		border-radius: 14rpx;
		
		margin-left: 40rpx;
		 line-height: 30px;
		 text-align: center;
		 margin-top: 30rpx;
	}
	.ccc{
		margin-top: 20rpx;
	}
	.guititle{
		margin-left: 40rpx;
		margin-top: 10rpx;
	}
	.guige>view{
		width: 80px;
		height: 30px;
		/* background-color:#f6f6f6; */
		border-radius: 14rpx;
		/* color: black; */
		margin-left: 40rpx;
		 line-height: 30px;
		 text-align: center;
		 margin-top: 30rpx;
		
	}
	.guige{
		display: flex;
		flex-wrap: wrap;
	
	}
	.oneImage{
		padding: 20rpx 16rpx;
	}
	.btnss{
		display: flex;
		justify-content: space-between;
	}
	.add {
			width: 39rpx;
			height: 39rpx;
			color: white;
			font-size: 36rpx;
			font-weight: 600;
			background-color: #fe9a69;
			border-radius: 50%;
			margin-top: 10rpx;
			line-height: 39rpx;
			text-align: center;
			position: relative;
			left: -17rpx;
		}
		.jian{
			position: relative;
			left: 22rpx;
			width: 39rpx;
			height: 39rpx;
			color: white;
			font-size: 36rpx;
			font-weight: 600;
			background-color: #fe9a69;
			border-radius: 50%;
			margin-top: 10rpx;
			line-height: 39rpx;
			text-align: center;
		}
		.number{
			
			
			margin:13rpx 37rpx;
		}
	.twoTitle{
		font-size: 36rpx;
		font-weight: 600;
		padding: 20rpx 10rpx;
	}
	.threeMoney{
			font-size: 38rpx; 
			color: #fe9a69;
	}
	.one{
		display: flex;
	}
	.one image{
		 width: 90px;
	}
	.two{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 249px;
	}
	.three{
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
	}
	.Pshowbox{
		width: 100%;
		height: 74vh;
		background-color: white;
	}
	.dd{
		position: relative;
		left: 150rpx;
		line-height: 80rpx;
		text-align: center;
		display: flex;
		height: 80rpx;
		border: 1px solid #f6f6f6;
			width: 100%;
	}
	.ac{
		width: 229rpx;
		height: 80rpx;
		background-color: #fe9a69;
	 border-radius: 22px 0px 0px 22px;
	 position: relative;
	 left: 32rpx;
	 	 color: white;
		 
	}
	.bd{
		width:180rpx;
		height: 80rpx;
		background-color: #ff6d5a;
		 border-radius: 22px 0px 0px 22px;
		 color: white;
		 z-index: 5;
	}
	.buyNav>image{
		width: 59rpx;
		margin-left: 20rpx;
		margin-top: 14rpx;
	
	
		
		
		
	}
	.buyNav{
		line-height: 80rpx;
		text-align: center;
		display: flex;
		height: 80rpx;
		border: 1px solid #f6f6f6;
			width: 100%;
				margin-top: 40rpx;
	}
	.image>image{
		width: 100%;
		height: 346px;
	}
	.title{
		font-size: 43rpx;
		font-weight: 500;
		margin-left: 20rpx;
		margin-top: 18rpx;
	}
	.money{
		color: #fe9a69;
		font-weight: 500;
		margin-left: 20rpx;
		margin-top: 18rpx;
	}
	.select{
		margin-left: 20rpx;
		margin-top: 38rpx;
		width: 364px;
		
	}
	.a{
	
	 color: #fe9a69;
	 font-size: 23rpx;
	 margin-left: 20rpx;
	}
	.b{
		color: #757575;
		margin-left: 6rpx;
	}
	.class{
		background-color: #f6f6f6;
		margin-left: 10rpx;
		padding: 8rpx 14rpx;
		border-radius: 8rpx;
	}
	.lx{
		 display: flex;
		 justify-content: flex-end;
		 margin-right: 10rpx;
	}
	.tw{
		 width: 100%;
		 height: 24px;
		 background-color: #f6f6f6;
		 color: #e8e8e8;
		 text-align: center;
		 line-height: 24px;
		 margin-top: 20rpx;
	}
	.tw>text{
		color: #bbbbbb;
		font-size: 30rpx;
		
	}
</style>